<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>武汉理工大学出版社</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<link type="text/css" rel="stylesheet" href="css/swiper.min.css">
</head>
<body style="background-color: #fff;">
<div id="app">
    <!-- 头部 -->
    <div id="header"></div>
	
    <div id="banner"></div>

    <!-- 新闻动态 -->
   <div class="news">
        <div class="name">
            <div class="title">
                <img src="static/titleIcon.png"/>
                <p>新闻动态</p>
            </div>
            <p><a href="live_broadcast_preview.html?name=XXDT">更多 >></a></p>
        </div>
        <div class="ban_list">
            <div class="ban_list_img">
                <div class="swiper-containers" id="container-xdtd">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in xwlbtList">
							<a :href="item.remark">
								<div class="swiper-zoom-container" style="display: block;position: relative;">
								    <img :src="imgUrl+item.image">
								</div>
							</a>
                        </div>
                    </div>
                </div>
				<!-- <div id="news"></div> -->
            </div>
            <div class="ban_list_ul">
                <ul>
                    <li v-for="item,index in newsList" :key="item.id" @click="onDetails(item.id)">
						<p class="title">{{item.title}}</p>
						<p class="time">{{item.publishTime}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 党建工作 -->
    <div class="party_building_work">
        <!-- 党建工作 -->
        <div class="news" style="width: 76%;">
            <div class="name">
                <div class="title">
                    <img src="static/titleIcon.png"/>
                    <p>党建工作/企业文化</p>
                </div>
                <p><a href="party_building.html?name=QYDJ&cur=3">更多 >></a></p>
            </div>
            <div class="ban_list">
                <div class="ban_list_img">
                    <ul>
                        <li v-for="(item,index) in djywhlbt">
                            <img :src="imgUrl+item.image">
                            <h2 v-if="item.remark">{{item.remark}}</h2>
                        </li>
                    </ul>
                </div>
                <div class="ban_list_ul" style="width: 59%;">
                    <ul>
                        <li v-for="item in partyBuildList" @click="onParty(item.id,item.classifyCode,item.title,item.content)">
							<p class="title">{{item.title}}</p>
							<p class="time">{{item.publishTime}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 图书中心 -->
        <div class="news" style="width: 22%;">
            <div class="name">
                <div class="title">
                    <img src="static/titleIcon.png"/>
                    <p>图书中心</p>
                </div>
            </div>
            <div class="education">
                <ul>
                    <li v-for="(item,index) in booksClassifyTypeList"
                        :style="{backgroundColor:index%2==0?'':'#ededed','cursor': 'pointer',}"
                        @click="onDetail(item.classifyCode,index)">
                        <img :src="imgUrl+item.classifyIcon"/>
                        <p>{{item.classifyName}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 新书推荐 -->
    <div class="news">
        <div class="name">
            <div class="title">
                <img src="static/titleIcon.png"/>
                <p>新书推荐</p>
            </div>
            <p><a href="recommend.html?name=XSTJ">更多 >></a></p>
        </div>
        <div class="recommend">
            <ul>
                <li v-for="(item,index) in booksList" @click="openDetail(item.id)">
                    <img :src="imgUrl+item.coverImg">
                    <p class="title">{{item.bookName}}</p>
                    <p class="author">作者:{{item.bookAuthor}}</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="tab">
        <ul>
            <li>
                <a href="announcement.html?name=TZGG">
                    <img src="static/icon4.png" style="width: 0.35rem;">
                    <p>通知公告</p>
                </a>
            </li>
            <li>
                <a href="apply.html?name=YSSQ">
                    <img src="static/icon5.png" style="width: 0.32rem;">
                    <p>样书申清</p>
                </a>
            </li>
            <li>
                <a href="contribute.html?name=ZZTG">
                    <img src="static/icon6.png" style="width: 0.3rem;">
                    <p>作者投稿</p>
                </a>
            </li>
            <li>
                <a :href="imgSource" target="_blank">
                    <img src="static/icon7.png" style="width: 0.33rem;">
                    <p>图片资源库</p>
                </a>
            </li>
            <li>
                <a :href="jcSource" target="_blank">
                    <img src="static/icon8.png" style="width: 0.34rem;">
                    <p>建材资源库</p>
                </a>
            </li>
            <li style="border: none;">
                <a :href="lgSource" target="_blank">
                    <img src="static/icon9.png" style="width: 0.4rem;">
                    <p>理工学苑</p>
                </a>
            </li>
          <!-- <li style="border: none; cursor: pointer;" @click="singleDetail(lxSource)">
                <img src="static/icon10.png" style="width: 0.34rem;">
                <p>联系我们</p>
            </li> -->
        </ul>
    </div>

    <!-- 绑定手机号 -->
    <div class="mask" v-show="show">
        <div class="bullet_box">
            <div class="title">绑定手机号</div>
            <div class="input">
                <input placeholder="请输入绑定手机号" type="number" v-model="phone" maxlength="11"/>
            </div>
            <div class="input" style="padding-right: 0;">
                <input placeholder="请输入验证码" type="number" v-model="code"/>
                <div class="hqcode" @click="getCode">
                    <p v-if="shows">获取验证码</p>
                    <p v-else>重新发送({{count}}s)</p>
                </div>
            </div>
            <div class="button">
                <button @click="changePhoneBind">确认提交</button>
            </div>
            <!-- <img class="close" src="static/closeIcon.png" @click="show = false"> -->
        </div>
    </div>

    <!-- 加载中 -->
    <div class="load_page" v-show="isLoadingShow">
        <div class="content">
            <div class="item">
                <i class="loader --1"></i>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer"></div>
</div>

</body>

<script type="text/javascript">
    const App = {
        data() {
            return {
                show: false,
                phone: '',
                code: '',
                imgUrl: 'http://dbs.wutp.com.cn/CM-API',
                bannerList: [],
                xwlbtList: [],
                djywhlbt: [],
                newsList: [],
                partyBuildList: [],
                booksClassifyTypeList: [],
                booksList: [],
                imgSource: '',
                jcSource: '',
                lgSource: '',
                lxSource: '',

                shows: true,
                timer: null, //设置计时器,
                count: "",

                isLoadingShow: false,

				// rotate :number,   //侧转角度（正值凹陷）、（负值凸出）
				// stretch : number,  //每个slide之间拉伸值（正值紧贴）、（负值远离）
				// depth :  number,   // 正值越大slide为远景图（可负值）
				// modifier :  number,  //depth和rotate和stretch的倍率，值越大这三个参数的效果越明显
				// shadows :  true     //是否使用阴影
            };
        },
        mounted() {
            // this.getBanner();
            this.getXwlbt();
            this.getDjywhlbt();
            this.getNews();
            this.getPartyBuild();
            this.getBooksClassifyType();
            this.getBooksList();
            this.getHomeSource();
        },
        methods: {
			onDetails(id){
				let hrefs = 'http://app.wutp.com.cn/live_broadcast_preview.html?name=XXDT';
				window.location.href="details.html?name=XXDT&id="+id+'&href='+hrefs;
			},
			onParty(id,classifyCode,title,content){
				sessionStorage.setItem('title',title);
				sessionStorage.setItem('content',content);
				window.location.href="party_building.html?name=QYDJ&partyId="+id+'&classifyCode='+classifyCode+'&cur=3';
			},
            openUrl(remark) {
                if (remark) {
                    // window.location.href = remark
                    window.open(remark)
                }
            },
            singleDetail(id) {
                window.location.href = "singleDetails.html?name=LXWM&id=" + id;
            },
            openDetail(id) {
				let hrefs = 'http://app.wutp.com.cn/recommend.html?name=XSTJ';
                window.location.href = "reDetails.html?name=XSTJ&id=" + id+'&href='+hrefs;
            },
            onDetail(classifyCode, index) {
                window.location.href = "library.html?name=TSZX&booksType=" + classifyCode + "&oneCur=" + index;
            },
            // 获取首页轮播图
            async getBanner() {
                let that = this;
                that.isLoadingShow = true;
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=SYLBT",
                }).then(function (res) {
                    setTimeout(() => {
                        new Swiper('#container-threemain', {  //绑定如期换成id!!!
                            pagination: '.swiper-pagination',
                            paginationClickable: true,
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            spaceBetween: 30,
                            autoplay: 3000,
                            grabCursor: true,
                            autoplayDisableOnInteraction: true,
                        });
                    }, 10)
                    console.log('首页轮播图', res)
                    that.bannerList = res.data.data;
                    that.isLoadingShow = false;
                })
            },
            // 获取新闻动态轮播图
            async getXwlbt() {
                let that = this;
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=XWLBT",
                }).then(function (res) {
                    setTimeout(() => {
                        new Swiper('#container-xdtd', {  //绑定如期换成id!!!
                            pagination: '.swiper-pagination',
                            paginationClickable: true,
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            spaceBetween: 30,
                            autoplay: 5000,
                            grabCursor: true,
                            autoplayDisableOnInteraction: true,
							speed:1000,
                        });
                    }, 10)
                    console.log('动态轮播图', res)
                    that.xwlbtList = res.data.data;
                })
            },
            // 获取党建轮播图
            async getDjywhlbt() {
                let that = this;
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=DJYWHLBT",
                }).then(function (res) {
                    console.log('党建轮播图', res.data.data)
                    that.djywhlbt = res.data.data;
                })
            },
            // 我的新闻动态
            async getNews() {
                let that = this;
                const orderParam = {publish_time: false}
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getNews?pageNum=1&pageSize=10",
                    params: {orderParam: orderParam},
                }).then(function (res) {
                    that.newsList = res.data.data.content;
                })
            },
            // 党建工作/企业文化
            async getPartyBuild() {
                let that = this;
                const orderParam = {publish_time: false}
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getPartyBuild?pageNum=1&pageSize=8",
                    params: {orderParam: orderParam},
                }).then(function (res) {
                    console.log(res.data);
                    that.partyBuildList = res.data.data.content;
                })
            },
            // 图书中心一级分类
            async getBooksClassifyType() {
                let that = this;
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBooksClassify?booksClassifyType=BooksType_First",
                }).then(function (res) {
                    console.log("图书中心一级分类", res.data.data);
                    that.booksClassifyTypeList = res.data.data;
                })
            },
            // 新书推荐
            async getBooksList() {
                let that = this;
				const orderParam={publish_time: false}
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/booksApi/getBooksList?thirdLabel=XSTJ",
					params: {orderParam:orderParam},
                }).then(function (res) {
                    console.log("新书推荐", res.data.data);
                    that.booksList = res.data.data.content;
                })
            },
            async getHomeSource() {
                let that = this;
                await axios({
                    method: "get",
                    url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getHomeSource",
                }).then(function (res) {
                    for (var i = 0; i < res.data.data.length; i++) {
                        if (res.data.data[i].type == 'TPZYK') {
                            that.imgSource = res.data.data[i].content
                        }
                        if (res.data.data[i].type == 'JCZYK') {
                            that.jcSource = res.data.data[i].content
                        }
                        if (res.data.data[i].type == 'LGXY') {
                            that.lgSource = res.data.data[i].content
                        }
                        if (res.data.data[i].type == 'LXWM') {
                            that.lxSource = res.data.data[i].id
                        }
                    }
                })
            },
            getCode() {
                if (!this.phone) {
                    alert('请输入手机号')
                } else {
                    let TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.shows = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.shows = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000);
                        // this.changePhoneBind();
                    } else {
                        alert('倒计时结束后在发送')
                    }
                }
            },
            // 绑定手机号
            async changePhoneBind() {
                let that = this;
                if (!this.phone) {
                    alert('请输入手机号')
                    return
                }
                if (!this.code) {
                    alert('请输入验证码')
                    return
                }
                const params = {
                    phone: that.phone,
                    // checkCode: that.code,
                    openId: that.openId,
                    type: 1
                }
                await axios({
                    method: "POST",
                    url: "http://dbs.wutp.com.cn/CM-API/memberApi/auth/bindPhone",
                    data: params
                    // Headers:{'Content-Type': 'application/json'}
                }).then(function (res) {
                    console.log("绑定手机号", res.data);
                    if (res.data.code == 200) {
                        alert('绑定成功')
                        that.show = false
                    } else {
                        alert(res.data.msg)
                    }
                })
            },
        },
    };
    Vue.createApp(App).mount('#app');

</script>

<style>
    .header {
        margin-bottom: 0px;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

   


    /* banner -------------------------------------------------------------- */
    .banner {
        width: 100%;
        height: 5.71rem;
        position: relative;
    }

    .banner .imgtextright {
        height: 100%;
    }

    .banner .imgtextright img {
        width: 100%;
        height: 100%;
    }

    /* 新闻动态 ------------------------------------------------------------------ */
    .news {
        margin: -0.4rem 2rem 0;
    }

    .news .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 1.5rem;
    }

    .news .name .title {
        width: 94%;
        display: flex;
        align-items: center;
        /* background: url(static/titleBack.png) no-repeat;
        background-size:100% 100%;
        background-position:right */

    }

    .news .name .title img {
        width: 0.08rem;
        margin-right: 0.08rem;
    }

    .news .name .title p {
        font-size: 0.24rem;
        line-height: 0.24rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #222222;
    }

    .news .name p {
        font-size: 0.18rem;
    }

    .news .ban_list {
        display: flex;
        justify-content: space-between;
		align-items: center;
    }

    .news .ban_list_img {
        width: 50%;
    }

    .news .ban_list_img img {
        width: 100%;
    }

    .news .ban_list_ul {
        width: 49%;
    }

    .news .ban_list_ul ul li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.01rem solid #eaeaea;
        padding: 0.12rem 0;
		cursor: pointer;
    }

    .news .ban_list_ul ul li .title {
        width: 70%;
        font-size: 0.16rem;
        color: #333;
        background: url(static/icon3.png) no-repeat;
        background-size: 0.22rem;
        background-position: left;
        padding-left: 0.22rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .news .ban_list_ul ul li .time {
        font-size: 0.16rem;
        color: #666;
    }

    .wenb {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0.6rem;
        width: 100%;
        background: rgba(0, 0, 0, .6);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: normal;
        color: ghostwhite;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ban_list .ban_list_img .swiper-container p {
        text-indent: 1em;
        font-size: 0.16rem;
        line-height: 0.6rem;
        text-align: left;
    }

    .ban_list .ban_list_img .swiper-pagination span {
        margin: 0 0.1rem;
    }

    .ban_list .ban_list_img .swiper-pagination {
        text-align: right;
        width: 98%;
        padding-right: 0.2rem;
    }


    /* 党建 ---------------------------------------------------------------------------- */
    .party_building_work {
        display: flex;
        justify-content: space-between;
        margin: 0 2rem;
    }

    .party_building_work .news {
        margin: 0;
    }

    .party_building_work .news .name .title {
        width: 92%;
    }

    .party_building_work .news .ban_list_img {
        width: 4.2rem;
    }

    .party_building_work .news .ban_list_img .ban_list_imgs {
        height: 1.9rem;
        margin-bottom: 0.16rem;
    }

    .party_building_work .news .ban_list_img img {
        width: 100%;
        height: 100%;
    }

    .party_building_work .news .education ul li {
        display: flex;
        align-items: center;
        padding: 0 0.4rem;
        background-color: #f6f6f6;
        height: 0.83rem;
    }

    .party_building_work .news .education ul li img {
        width: 0.4rem;
        margin-right: 0.3rem;
    }

    .party_building_work .news .education ul li p {
        font-size: 0.2rem;
        line-height: 0.2rem;
    }

    /* 新书推荐 --------------------------------------------------- */
    .recommend ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .recommend ul li {
        width: 19%;
        border: solid 0.01rem #dddddd;
        padding: 0.14rem 0;
        text-align: center;
        margin-bottom: 0.16rem;
        /*margin-right: 0.13rem;*/
        cursor: pointer;
    }

    .recommend ul li:last-child {
        margin-right: 0;
    }

    .recommend ul li img {
        /*width: 70%;*/
        width: 2rem;
        height: 3rem;
    }

    .recommend ul li p {
        margin: auto;
    }

    .recommend ul li .title {
        font-size: 0.16rem;
        font-weight: bold;
        margin-top: 0.06rem;
        height: 0.4rem;
    }

    .recommend ul li .author {
        font-size: 0.14rem;
        color: #666;
        margin-top: 0.06rem;
    }

    .tab {
        margin: 0 2rem 0.4rem;
    }

    .tab ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 1.2rem;
        background-color: #f6f6f6;
    }

    .tab ul li {
        border-right: 0.01rem solid #999999;
        width: 18%;
        text-align: center;
    }

    /* .tab ul li img{
        width: 0.34rem;
    } */
    .tab ul li p {
        font-size: 0.16rem;
        color: #666666;
    }

    /* 遮罩层*/
    .mask {
        background-color: rgba(0, 0, 0, 0.7);
        /* 使用固定定位让元素撑满全屏 */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998;
    }

    /* 登录窗口 */
    .mask .bullet_box {
        border-radius: 0.2rem;
        width: 7rem;
        background-color: #fff;
        padding: 0.4rem 0.4rem 0.6rem;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
    }

    .mask .bullet_box .title {
        font-size: 0.3rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #213052;
        line-height: 0.3rem;
        text-align: center;
        margin-bottom: 0.58rem;
    }

    .mask .bullet_box .checkbox {
        display: flex;
        align-items: center;
        margin: 0 0.5rem;
    }

    .mask .bullet_box .checkbox_item {
        display: flex;
        align-items: center;
        width: 40%;
        cursor: pointer;
    }

    .mask .bullet_box .checkbox_item img {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.1rem;
    }

    .mask .bullet_box .checkbox_item span {
        font-size: 0.24rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        line-height: 0.24rem;
    }

    .mask .input {
        height: 0.58rem;
        border: 0.01rem solid #D2D2D2;
        display: flex;
        align-items: center;
        padding: 0 0.18rem;
        margin: 0.36rem 0.5rem 0;
    }

    .mask .input input {
        border: none;
        width: 100%;
        height: 100%;
    }

    .mask .video {
        background-color: #fff;
        padding: 0.4rem 0.4rem 0.6rem;
        position: fixed;
        width: 500px;
        height: 500px;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .button {
        margin: 0.35rem 0.5rem 0;
    }

    .button button {
        width: 100%;
        height: 0.58rem;
        background-color: #203051;
        color: #fff;
        cursor: pointer;
    }

    .close {
        width: 0.20rem;
        height: 0.20rem;
        position: absolute;
        top: -0.2rem;
        right: -0.2rem;
        cursor: pointer;
    }

    .hqcode {
        width: 1.8rem;
        background-color: #203051;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
</style>
</html>
